<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的hello </title>
    <style>
        #div1{
            width: 100px; height: 100px;
        }
        .c1{
            background-color: deepskyblue;
        }
        .c2{
            background-color: greenyellow;
        }
    </style>
    <script src="https://unpkg.com/vue@3.4.32/dist/vue.global.js"></script>
    <!-- 网络下载 vue.js 文件 -->
</head>
<body>
<!--
-->

<div id="app">

    <div id="div1" :class="clz"></div>
    <button @click="change">改变背景</button>

</div>

<script>
    const { createApp, ref } = Vue;
    const app = createApp({
        setup(){

            const clz = ref('c2')
            let change = ()=>{
                //观察clz的值，如果是c1就改为c2，否则改为c1
                //要去到响应式对象中包含的原始值，必须通过响应式对象的value属性进行
                //console.log(clz.value)

                // ===   这个判断类型 和 内容
                // ==    这个判断内容        (js 中的判断一定要 小心很容易出错)

                clz.value =  clz.value === 'c1' ? 'c2' : 'c1';
            }

            return {
                clz,
                change
            }
        }
    });
    app.mount('#app');

</script>

</body>
</html>